<template>
  <el-container v-if="mode=='vertical'">
    <el-header>
      <div class="header-div-logo" :style="{width: isCollapse?'65px':'200px',height: '60px',float: 'left'}">
        <div :style="{width: isCollapse?'':'134px',display: isCollapse?'none':'block', float: 'left'}">logo</div>
        <div class="header-div-button">
          <el-tooltip class="item" effect="dark" :content="isCollapse?$t('menu.expand'):$t('menu.collapse')" placement="bottom">
            <el-button style="width: 65px;"
                     @click="isCollapse = !isCollapse"
                     :icon="isCollapse?'el-icon-s-unfold':'el-icon-s-fold'"></el-button>
          </el-tooltip>
        </div>
      </div>
      <div style="float: right">
        <el-dropdown class="languageDropdown"
                     @command="changeLanguage">
          <span class="el-dropdown-link">
            {{language}}<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="zh">{{$t('language.zh')}}</el-dropdown-item>
            <el-dropdown-item command="en">{{$t('language.en')}}</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </el-header>
    <el-container>
      <el-aside :style="{width:isCollapse?'65px':'200px',height:(screenHeight-60)+'px'}">
        <BroadsideMenu :list="menus" :mode="mode" :is-collapse="isCollapse" :sub-level=1></BroadsideMenu>
      </el-aside>
      <el-main>
        <Body></Body>
      </el-main>
    </el-container>
  </el-container>
  <el-container v-else>
    <el-header>
      <TopMenu :list="menus" :sub-level=1></TopMenu>
    </el-header>
    <el-main>
      <el-radio-group v-model="mode" style="margin-bottom: 20px;">
        <el-radio-button :label="'horizontal'">{{$t("menu.mode.horizontal")}}</el-radio-button>
        <el-radio-button :label="'vertical'">{{$t("menu.mode.vertical")}}</el-radio-button>
      </el-radio-group>
    </el-main>
  </el-container>
</template>

<script>
  import BroadsideMenu from "../components/BroadsideMenu";
  import TopMenu from "../components/TopMenu";
  import Body from "./Body";

  export default {
    name: "Main",
    components: {BroadsideMenu, TopMenu, Body},
    data() {
      return {
        screenWidth: '',
        screenHeight: '',
        language: 'zh',
        mode: 'vertical',
        isCollapse: false,
        menus: [
          {
            index: '1',
            name: '首页',
            id: -1,
            icon: 'el-icon-picture-outline-round',
            url: '/index',
            children: []
          },
          {
            index: '2',
            name: '按钮',
            id: 20,
            icon: 'el-icon-message-solid',
            url: '/button',
            children: []
          },
          {
            index: '3',
            name: '测试1',
            id: 1,
            icon: 'el-icon-s-claim',
            url: '',
            children: [
              {
                index: '3-1',
                id: 4,
                parentid: 1,
                name: '测试1-1',
                icon: 'el-icon-chat-dot-round',
                url: '',
                children: [
                  {
                    index: '3-1-1',
                    id: 8,
                    parentid: 1,
                    name: '测试1-1-1',
                    icon: 'el-icon-cloudy',
                    url: '/test',
                    children: []
                  },
                  {
                    index: '3-1-2',
                    id: 9,
                    parentid: 1,
                    name: '测试1-1-2',
                    icon: 'el-icon-files',
                    url: '/test1',
                    children: []
                  }
                ]
              },
              {
                index: '3-1',
                id: 5,
                parentid: 1,
                name: '测试1-2',
                icon: 'el-icon-shopping-cart-1',
                url: '/test3',
                children: []
              }
            ]
          },
          {
            index: '4',
            name: '测试2',
            id: 2,
            icon: 'el-icon-menu',
            url: '',
            children: [
              {
                index: '4-1',
                id: 6,
                parentid: 2,
                name: '测试2-1',
                icon: 'el-icon-folder-checked',
                url: '',
                children: []
              },
              {
                index: '4-2',
                id: 7,
                parentid: 2,
                name: '测试2-2',
                icon: 'el-icon-folder-remove',
                url: '',
                children: []
              }
            ]
          },
          {
            index: '5',
            name: '测试3',
            id: 3,
            icon: 'el-icon-monitor',
            url: '',
            children: []
          }
        ]
      }
    },
    methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
      changeLanguage(value) {
        // 记录语言选择
        localStorage.setItem('locale', value)
        this.$i18n.locale = value;
      }
    },
    mounted() {
      this.screenWidth = document.documentElement.clientWidth;
      this.screenHeight = document.documentElement.clientHeight;
      console.log(this.screenWidth)
      console.log(this.screenHeight)
      window.onresize = () => {
        return (() => {
          this.screenWidth = document.documentElement.clientWidth;
          this.screenHeight = document.documentElement.clientHeight;
        })();
      };
    }

  }
</script>
<style>

</style>

<!-- Add 'scoped' attribute to limit CSS to this component only -->
<style scoped>
  header {
    //border-bottom: solid 1px #e6e6e6;
    padding: 0;
  }
  .header-div-button {
    border-right: solid 1px #e6e6e6;
    height: 100%;
  }
  .languageDropdown {
    margin-right: 30px;
  }

</style>
